<!-- wtire by wzy -->
<template>
    <div>
        <el-popover v-model:visible="visible" :virtual-ref="goodsRef" trigger="manual" virtual-triggering placement="bottom-end">
                <div class="popover-content">
                        <h3>休闲食品</h3>
                        <ul>
                            <li>肉干肉铺</li>
                        </ul>
                </div>
        </el-popover>
     
    </div>

</template>


<script setup>
import { ElPopover } from 'element-plus';
import { ref,defineExpose } from 'vue';
import 'element-plus/dist/index.css';
const visible = ref(false);
const goodsRef = ref(null);

// 暴露给父组件的方法
defineExpose({
  show() {
    visible.value = true;
  },
  hide() {
    visible.value = false;
  }
});
</script>
<style scoped>
    .popover-content {
  padding: 10px;
  background: #fff;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
}

.popover-content h3 {
  margin: 0 0 10px;
  font-size: 16px;
}

.popover-content ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.popover-content ul li {
  padding: 5px 0;
}
</style>